<template>
	<view>
		<view class="myinfobox" >
			<image src="../../static/ypi.jpg" style="width: 150rpx; height: 150rpx; margin-left: 20rpx;"></image>
			<view style="display: flex; flex-direction: column; margin-right: 200rpx;">
				<text>账号：{{username}}</text>
				<text>昵称：{{nickname}}</text>
				<text>车牌：{{platenumber}}</text>
				<text>余额：{{balance/100}}元</text>
			</view>
			
		</view>
		
		<view style="background-color: #FFFFFF;text-align: center; margin: 30rpx; padding: 10rpx;" @click="changenickname()">
			<text>修改昵称</text>
		</view>
		
		<view>
					<!-- 输入框示例 -->
					<uni-popup ref="inputDialog" type="dialog">
						<uni-popup-dialog ref="inputClose"  mode="input" title="修改昵称" 
							placeholder="请输入你要修改的昵称:" @confirm="dialogInputConfirm"></uni-popup-dialog>
					</uni-popup>
		</view>
		
		<view style="background-color: #FFFFFF;text-align: center; margin: 30rpx; padding: 10rpx;" @click="logout()">
			<text>注销登录</text>
		</view>
		
	</view>
</template>

<script>
	import{personaldataurl} from '../../common/api.js'
	import{changenicknameurl} from '../../common/api.js'
	export default {
		data() {
			return {
				username:"",
				nickname:"",
				platenumber:"",
				balance:""
			}
		},
		onShow() {
			this.getMyinfo();
		},
		methods: {
			
			dialogInputConfirm(value)
			{
				let jwt = uni.getStorageSync('jwt');
				uni.request({
					url: changenicknameurl,
					method:'POST',
					header: {						
						'jwt': jwt,
						'Content-Type':'application/x-www-form-urlencoded'
					},
					data:{
						name:value
					},
					success: (res) => {
				
						let result = res.data;
						console.log(result);
						if(result.status==0)
						{
							uni.showToast({
								title: "修改昵称成功",
								icon:"none"								
							});
							this.getMyinfo();
						}
						
						else
						{
							console.log("修改昵称失败");
						}
						
				
					},
					fail: () => {
						console.log("网络异常");
					}
				})
			},
			
			changenickname()
			{
				console.log("你点击了修改昵称");
				this.$refs.inputDialog.open();
			},
			
			logout()
			{
				uni.showModal({
					title: '提示',
					content: '你确实要注销吗？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.removeStorageSync('jwt');
							uni.redirectTo({
								url:'/pages/login/login'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			getMyinfo()
			{
				let jwt = uni.getStorageSync('jwt');
				uni.request({
					url: personaldataurl,
					header: {
						'jwt': jwt
					},
					success: (res) => {
				
						let result = res.data;
						console.log(result);
						if(result.status==0)
						{
							this.username=result.data.phone;
							this.nickname=result.data.nickname;
							this.balance=result.data.accountBalance;
							this.platenumber=result.data.carInfos[0].plateNum;
						}
						else
						{
							console.log("获取个人信息失败");
						}
						
				
					},
					fail: () => {
						console.log("网络异常");
					}
				})
			}
		}
	}
</script>

<style>
	.myinfobox
	{
		background-color: #FFFFFF;
		margin: 30rpx;
		height: 300rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

</style>
